.buttons {
    background: linear-gradient(135deg, #4a90e2, #50e3c2);
    color: white;
    border: 2px solid #4a90e2;
    padding-right: 24px;
    padding-left: 24px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 20px;
    font-size: 16px;
    transition: 0.5s;
    font-weight: 900;
    text-decoration: none;
}

body{
    margin: 0px;
}

::selection{
    color: black;
    background-color:aqua;
}

img::selection{
    background-color: transparent;
}

.buttons::selection{
    background-color: transparent;
    color: white;
}

#cool::selection{
    background-color:transparent;
    color: white;
}

br::selection{
    background-color: transparent;
}

#parent p{
    margin-bottom: 20px;
}

#src>span::selection{
    background: linear-gradient(to right, #b2dff7, #6fa3ef, #03fa6e 70% 100%);
    color: transparent;
    background-clip: text;
}

.buttons:hover {
    background: linear-gradient(135deg, #50e3c2, #4a90e2);
    border-color: #50e3c2;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
    transform: translateY(-8px);
    cursor: pointer;
}

#remove-margin{
    margin: 0px;
}

#src{
    color: #6fa3ef;
    background: linear-gradient(to right, #b2dff7, #6fa3ef, #03fa6e 70% 100%);
    background-clip: text;
    font-family: cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 34px;
    font-weight: 900;
}

#src > span{
  color: transparent;
}

#ma{
    color: cornflowerblue;
}

summary,p{
    font-family: "Zain", sans-serif;
    font-weight: 900;
    margin: 0px;
}
        
#cool{
    margin-right: 60px;
    font-size: 18px;
}

#website-logo{
    border-top-left-radius:50% ;
    border-top-right-radius:50% ;
    border-bottom-right-radius:50% ;
    border-bottom-left-radius:50% ;
}

footer{
    background: linear-gradient(to bottom, black 0.1% ,#2c3e50, #4ca1af);
    padding: 16px;
    border-radius: 30px;
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
}

    header{
        background: linear-gradient(to top,black,teal,#49f091);
        border-radius: 30px;
        border-bottom-left-radius: 0%;
        border-bottom-right-radius: 0%;
        padding-left: 32px;
        padding-bottom: 50px;
    }
    main{
        background-color: black;
    }
    
    #search-input {
        width: 80%;
        padding: 9px ;
        border: 1px solid #fff;
        border-radius: 20px;
        font-size: 20px;
        outline: none;
        transition: 0.3s;  
        margin-bottom: 10px;
        font-weight: 900;
        font-family: zain;
        padding-right:20px;
        padding-left: 20px;
    }
      
    #search-input:focus {
        border-color: #007bff;
    }

    #search-input::placeholder{
        font-weight: 900;
        font-family: zain;

    }

    #parent{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 50px;
        filter: drop-shadow(0px 0px 10px silver);
        padding: 17px;
    }

    #first-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        margin-top: 10px;
        background-color: rgb(32, 31, 31);
        display: inline-block;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #first-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        
    }

    #first-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 250px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #first-p{
        margin-right: 26px;
        font-size: 20px;
        margin-bottom: 50px;
    }

    #second-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    } 

        #second-div:hover{
            background-color: #1e1e1e;
            border-color: gold;
            transform: scale(1.05);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
           
        }

        #second-photo{
            margin-right: 23px;
            margin-top: 10px;
            height: 240px;
            border-bottom-left-radius: 20%;
            border-top-right-radius: 20%;
            display: inline-block;
            margin-bottom: 5px;
        }

        #second-p{
            margin-right: 26px;
            font-size: 20px;
            margin-bottom: 3px;
            margin-bottom: 34px;
        }


        #third-div{
            width: 250px;
            height: 400px;
            border: 3px outset;
            background-color:rgb(32, 31, 31);
            display: inline-block;
            margin-top: 10px;
            margin-bottom: 50px;
            transition: 0.5s;
        }
        
        #third-div:hover{
            background-color: #1e1e1e;
            border-color: gold;
            transform: scale(1.05);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
           
        }

        #third-photo{
            margin-right: 23px;
            margin-top: 10px;
            height: 240px;
            border-bottom-right-radius: 20%;
            border-top-left-radius: 20%;
            display: inline-block;
            margin-bottom: 5px;
        }

        #third-p{
            margin-right: 26px;
            font-size: 20px;
            margin-bottom: 34px;
        }


        #fourth-div{
            width: 250px;
            height: 400px;
            border: 3px outset;
            background-color:rgb(32, 31, 31);
            display: inline-block;
            margin-top: 10px;
            margin-bottom: 50px;
            transition: 0.5s;
        }

        #fourth-div:hover{
            background-color: #1e1e1e;
            border-color: gold;
            transform: scale(1.05);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
            
        }

        #fourth-photo{
            margin-right: 23px;
            margin-top: 10px;
            height: 240px;
            border-bottom-left-radius: 20%;
            border-top-right-radius: 20%;
            display: inline-block;
            margin-bottom: 5px;
        }

        #fourth-p{
            margin-right: 23px;
            font-size: 18px;
            margin-bottom: 38px;
        }

        #fifth-div{
            width: 250px;
            height: 400px;
            border: 3px outset;
            background-color:rgb(32, 31, 31);
            display: inline-block;
            margin-top: 10px;
            margin-bottom: 20px;
            transition: 0.5s;
        }

        #fifth-div:hover{
            background-color: #1e1e1e;
            border-color: gold;
            transform: scale(1.05);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
            
        }

    #fifth-photo{
        margin-right: 34px;
            margin-top: 10px;
            height: 230px;
            border-bottom-right-radius: 20%;
            border-top-left-radius: 20%;
            display: inline-block;
            margin-bottom: 5px;
    }

    #fifth-p{
        margin-right: 26px;
        font-size: 18px;
        margin-bottom: 21px;
    }

    #sixth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #sixth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        
    }

    #sixth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #sixth-p{
        margin-right: 23px;
        font-size: 18px;
        margin-bottom: 34px;
    }


    #seventh-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #seventh-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        
    }

    #seventh-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

#seventh-p{
    margin-right: 26px;
    font-size: 18px;
    margin-bottom: 36px;
}


#eightth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #eightth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        
    }


    #eightth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #eightth-p{
        margin-right: 23px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #nineth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #nineth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #nineth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #nineth-p{
        margin-right: 40px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    
    #tenth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #tenth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        
    }

    #tenth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #tenth-p{
        margin-right: 23px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #eleventh-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s; 
    }

    #eleventh-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
       
    }
    
    #eleventh-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #eleventh-p{
        margin-right: 23px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #twelveth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #twelveth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        
    }

    #twelveth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #twelveth-p{
        margin-right: 15px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #fourteenth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #fourteenth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        
    }

    #fourteenth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #fourteenth-p{
        margin-right: 23px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    

    #fivteenth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #fivteenth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        
    }

    #fivteenth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 220px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #fivteenth-p{
        margin-right: 23px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #sixteenth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

     #sixteenth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        }

    #sixteenth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #sixteenth-p{
        margin-right: 50px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #seventeenth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;

        margin-top: 10px;
        margin-bottom: 50px;
         transition: 0.5s;
    }

     #seventeenth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
       
        }

    #seventeenth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #seventeenth-p{
        margin-right: 23px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    
    #eightteenth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
         transition: 0.5s;
    }

    #eightteenth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
       
    }
    
    #eightteenth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #eightteenth-p{
        margin-right: 25px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #nineteenth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #nineteenth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        
    }

    #nineteenth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #nineteenth-p{
        margin-right: 23px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #twentyth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #twentyth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        
    }
    
    #twentyth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #twentyth-p{
        margin-right: 25px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #twentyoneth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #twentyoneth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
        
    }

    #twentyoneth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #twentyoneth-p{
        margin-right: 23px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #twentytwoth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #twentytwoth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }
    
    #twentytwoth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #twentytwoth-p{
        margin-right: 25px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #twentythreeth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #twentythreeth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #twentythreeth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #twentythreeth-p{
        margin-right: 60px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #twentyfourth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #twentyfourth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }
    
    #twentyfourth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #twentyfourth-p{
        margin-right: 70px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #twentyfiveth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #twentyfiveth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #twentyfiveth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #twentyfiveth-p{
        margin-right: 60px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #twentysixth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #twentysixth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }
    
    #twentysixth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #twentysixth-p{
        margin-right: 40px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #twentyseventh-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #twentyseventh-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #twentyseventh-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #twentyseventh-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #twentyeightth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #twentyeightth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }
    
    #twentyeightth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #twentyeightth-p{
        margin-right: 30px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #twentynineth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #twentynineth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #twentynineth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #twentynineth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #thirtyth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #thirtyth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }
    
    #thirtyth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #thirtyth-p{
        margin-right: 30px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #thirtyoneth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #thirtyoneth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #thirtyoneth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #thirtyoneth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #thirtytwoth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #thirtytwoth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #thirtytwoth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #thirtytwoth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #thirtythreeth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #thirtythreeth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #thirtythreeth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #thirtythreeth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #thirtyfourth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #thirtyfourth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #thirtyfourth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #thirtyfourth-p{
        margin-right: 20px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #thirtyfiveth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-right: 50px;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #thirtyfiveth:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #thirtyfiveth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #thirtyfiveth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #thirtysixth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #thirtysixth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #thirtysixth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #thirtysixth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #thirtyseventh-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #thirtyseventh-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #thirtyseventh-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #thirtyseventh-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }


    #thirtyeightth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #thirtyeightth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #thirtyeightth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #thirtyeightth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #thirtynineth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #thirtynineth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #thirtynineth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #thirtynineth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #fourtyth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #fourtyth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #fourtyth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #fourtyth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #fourtyoneth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #fourtyoneth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #fourtyoneth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #fourtyoneth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    #fourtytwoth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
    }

    #fourtytwoth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #fourtytwoth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-right-radius: 20%;
        border-top-left-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #fourtytwoth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 0px;
    }

    #h2{
        display:inline-flex;
        margin: 0px;
        margin-right: 10px;
    }
    
    #fourtythreeth-div{
        width: 250px;
        height: 400px;
        border: 3px outset;
        background-color:rgb(32, 31, 31);
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 50px;
        transition: 0.5s;
        padding-bottom: 20px;
    }

    #fourtythreeth-div:hover{
        background-color: #1e1e1e;
        border-color: gold;
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); 
    }

    #fourtythreeth-photo{
        margin-right: 23px;
        margin-top: 10px;
        height: 240px;
        border-bottom-left-radius: 20%;
        border-top-right-radius: 20%;
        display: inline-block;
        margin-bottom: 5px;
    }

    #fourtythreeth-p{
        margin-right: 10px;
        font-size: 18px;
        margin-bottom: 60px;
    }

    nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 40px;
    position: fixed;
    top: 0px;
    right: 0px;
    height: 100%;
    z-index: 1000;
    transform: translateX(200vw) ;
    font-size: 23px;
    transition: all 0.4s ease-in-out;
  }

    nav a {
    color: white;
    display: block;
    padding: 30px;
    text-decoration: none;
  }
  
    nav a:hover {
    background-color: #007bff;
  }  
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: black;
}

::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}
::-webkit-scrollbar-corner{
    display: none;
}

.fa-moon{
    position: absolute;
    top: 5px;
    left: 25px;
    cursor: pointer;
    display: none;
}

.fa-sun{
    position: absolute;
    top: 5px;
    left: 25px;
    cursor: pointer;
    display: block;
}

  html{scroll-behavior: smooth;}

  #the-best-menu-ever-even-better-than-marc-s-menu{
    position: absolute;
    top: 5px;
    right: 25px;
  }

  #omar-s-idea {
    padding: 30px;
    border: 8px solid #ff6347;
    font-size: 28px;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    background: linear-gradient(45deg, #ff6347, #4ca1af);
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
    position: absolute; 
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, transform 0.3s ease;
    max-width: 100%;
    word-break: break-word;
    z-index: 999;
}

  .font-awesome{
    position: absolute;
    top: 10px;
    right: 10px;
    margin-bottom: 5px;
    transition: all 0.3s linear;
    border: transparent 2px none;
    border-radius:100% ;
    cursor: pointer;
    color: red;
   }
   i[alt="فتح"]{
    font-size: 50px;
    color: transparent;
    background: linear-gradient(to right, cyan , rgb(68, 68, 231));
    background-clip: text;
   }
   i[alt="اغلاق"]{
    font-size: 30px;
    position: static;
   }
  .font-awesome:hover{
   transform: scale(1.2);
  }

  #omar-s-idea p{
   margin-top: 50px;
   color: white;
  }

  #info a{
    color: white;
    text-decoration: none;
  }

  #problem{
    display: none;
}

#creative{
    width: 40px;
    height: 150px;
    background-color: #1e1e1e;
    border-radius: 10px;
    display: grid;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    position: fixed;
    right: 0px;
    top: 150px;
}

#smallBox{
    width: 100px;
    height: 160px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 250px;
    right: -40px;
    transform: translateY(-50%);
}


#angela{
   font-size: 40px;
   color: #03fa6e;
   cursor: pointer;
   position: fixed;
   right: 40px;
   top: 200px;
}
   #creative a {
    color: white;
    transition: 0.7s;
}

#creative a:hover {
    color: #03fa6e;
}

    .inputs{
        width: 70%;
        padding: 10px;
        margin-bottom: 20px;
        border: 2px solid #ccc;
        border-radius: 5px;
        font-size: 18px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        background-color: teal;
        color: white;
        font-weight: 900;
        font-family: "Zain",sans-serif;
        margin-right: 30px;
    }
        
    .inputs:focus {
        border-color: #49f091;
        box-shadow: 0 0 8px rgba(73, 240, 145, 0.2);
        outline: none;
    }
    
    textarea.inputs {
        resize: vertical;
        height: 100px;
    }

    #submit {
        width: 30%;
        padding: 12px;
        background-color: #49f091;
        color: black;
        font-weight: 900;
        font-family: sans-serif;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
        margin-right: 20px;
    }

    #submit:hover{
        background-color: #4e9c70;
    }

  @media (min-width: 320px) and (max-width: 480px){
    nav {
        bottom: 0px;
        right: 0px;
        width: 100%;
    }

    #h2{
        margin-bottom: 20px;
    }

    header{
        padding-left: 4.5px;
    }

    #cool{
        margin: 0px;
    }


    main{
        background-color: black;
        padding-left: 17.2px;
    }

    #submit{
        width: 80%;
    }

}

  @media (max-width: 319px){
    nav {
        bottom: 0px;
        right: 0px;
        width: 100%;
    }

    #submit{
        width: 80%;
    }

    #h2{
        margin-bottom: 20px;
    }

    header{
        padding-left: 4.5px;
    }

    #cool{
        margin: 0px;
    }

    main{
        background-color: black;
        padding: 0px;
    }
}

@media (max-width: 768px) {
    #omar-s-idea {
        padding: 20px;
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    #omar-s-idea {
        padding: 15px;
        font-size: 20px;
        border: 5px solid #ff6347;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    }
}

@media (max-width: 320px) {
    #omar-s-idea {
        padding: 10px;
        font-size: 18px;
        border: 4px solid #ff6347;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }
}

@media (max-height: 320px) {
    #creative{
        width: 40px;
        height: 150px;
        background-color: #1e1e1e;
        border-radius: 10px;
        display: grid;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        position: fixed;
        right: 0px;
        top: 50px;
    }
    
    #smallBox{
        width: 100px;
        height: 160px;
        display: flex;
        align-items: center;
        position: fixed;
        top: 150px;
        right: -40px;
        transform: translateY(-50%);
    }
    
    
    #angela{
       font-size: 40px;
       color: #03fa6e;
       cursor: pointer;
       position: fixed;
       right: 40px;
       top: 100px;
    }
}

@media (min-height: 321px) and (max-height: 600px) {
    #creative{
        width: 40px;
        height: 150px;
        background-color: #1e1e1e;
        border-radius: 10px;
        display: grid;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        position: fixed;
        right: 0px;
        top: 46px;
    }
    
    #smallBox{
        width: 100px;
        height: 160px;
        display: flex;
        align-items: center;
        position: fixed;
        top: 146px;
        right: -40px;
        transform: translateY(-50%);
    }
    
    
    #angela{
       font-size: 40px;
       color: #03fa6e;
       cursor: pointer;
       position: fixed;
       right: 40px;
       top: 96px;
    }
}